<template>
  <div class="homeBox">
    <el-container style="height: 100%" direction="vertical">
      <el-main style="padding: 0px;">
        <el-container style="padding: 2px;">

          <el-header id="context-header" style="height:16%; margin-top: 10px;">

            <el-row>
              <el-col :span="2" :offset="1">
                 <div class="grid-content " id="font-title">
               全部课程
                 </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="1" offset="1"><div class="grid-content">部位：</div></el-col>
            <el-col :span="3" :offset="0"><div class="grid-content"><el-select v-model="value"  size="mini" placeholder="不限部位">
              <el-option
                v-for="item in places"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select></div></el-col>
              <el-col :span="1" offset="1"><div class="grid-content">难度：</div></el-col>
            <el-col :span="3"><div class="grid-content "><el-select v-model="value1" size="mini" placeholder="不限难度">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value1">
              </el-option>
            </el-select></div></el-col>
              <el-col :span="5" :offset="8"><div class="grid-content">
                <el-button>人气排行</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button>最新发布</el-button>
              </div></el-col>
          </el-row>

          </el-header>
          <el-main id="card-box">

            <el-card shadow="hover"  v-for="(item,index) in cardInformation" :key="i" id="card" :body-style="{ padding: '0px' }" >
              <router-link :to="{name: '课程详情', query: {course:JSON.stringify(item)}}">
              <div  class="text item"  v-bind:style="{backgroundImage:'url(' + item.coursephoto + ')'}" >
                <h1 style="display: block; margin: 10px 10px 10px 10px; font-size: 23px;letter-spacing: 3px">{{item.coursename}}</h1>
                <p style="white-space:pre; font-size: 18px; display: block; margin-left: 10px" >H{{item.intensity}}   {{item.apparatus}}</p>
              <p style="font-size: 18px; display: block; margin-left: 10px">{{item.bodypart}}</p>
              </div>
              </router-link>
            </el-card>

          </el-main>

        </el-container>

      </el-main>
    </el-container>
  </div>
</template>

<script>
    export default {
        name: "CoursesDisplay",
      data() {
        return {
          places: [{
            value: '选项1',
            label: '不限部位'
          }, {
            value: '选项2',
            label: '默认'
          }, {
            value: '选项3',
            label: '胸部'
          }, {
            value: '选项4',
            label: '肩部'
          },
            {
            value: '选项5',
            label: '背部'
          },{
            value: '选项6',
            label: '臀部'
          },{
            value: '选项7',
            label: '腿部'
          },{
            value: '选项8',
            label: '手臂'
          },{
            value: '选项9',
            label: '全身'
          }
          ],
          options: [{
            value1: '选项1',
            label: '不限难度'
          }, {
            value1: '选项2',
            label: 'H1'
          }, {
            value1: '选项3',
            label: 'H2'
          }, {
            value1: '选项4',
            label: 'H3'
          }, {
            value1: '选项5',
            label: 'H4'
          }, {
            value1: '选项6',
            label: 'H5'
          }],
          cardInformation:[],
          value: '',
          value1:''
        }
      },
      created() {
        var url = '/course';
        this.$axios.get(url)
          .then( (res)=> {
            //document.write("data is coming", res.data.code);
            if (res.data.code === 200) {
              for(var i=0;i<res.data.data.length;i++) {
                let row = {}; // 定义一个当前添加数据的行
                if(res.data.data[i].audit == 1){
                row.id=res.data.data[i].id;
                row.coursename = res.data.data[i].coursename;
                row.coursebrief = res.data.data[i].coursebrief;
                row.intensity = res.data.data[i].intensity;
                row.apparatus = res.data.data[i].apparatus;
                row.bodypart = res.data.data[i].bodypart;
                row.coursephoto = res.data.data[i].coursephoto;
                row.price = res.data.data[i].price;
                row.audit = res.data.data[i].audit;
                row.stageamount=res.data.data[i].stageamount;
                this.cardInformation.push(row);
                }
              }
             sessionStorage.setItem('course',JSON.stringify(this.cardInformation));
            }
            else {
              this.$message({message: res.data.msg, type: 'error'})
            }
          }).catch(function (error) {
          console.log(error);
        } );
      }
    }
</script>

<style scoped>
  html,
  body,
  .homeBox,
  .el-container{
    min-height: 100vh;

  }

  .el-header, .el-footer {

    color: #333;
    text-align: center;
    line-height: 50px;



  }

  .el-row {
    margin-bottom: 10px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
#context-header{
  height:300px;
}
  #font-title{
    line-height:1.3;
    font-size: 26px;
    font-weight: bold;
  }
  #card-box{

    /*border:solid 1px red;*/
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    left: 5%;
    position: relative;
    padding: 0px;
    align-content: flex-start;
    text-align: justify;

  }

#card{

  width: 32%;
  margin: 4px;
height: 200px;
  /*background-image: url("https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg");*/

}
#card-box:after{
  content: '';
  width: 33%;
  height: 200px;
}
  .text {
    font-size: 14px;
    color: #e5e9f2;
  }

  .item {
    height:100%;
    width:100%;
    overflow: hidden;
    background-size:cover;
    height: 200px;
  }

  .router-link-active {
    text-decoration: none;
    color: #fff;
  }
  a {
    text-decoration: none;
    color: #fff;
  }
  h1{

  }

</style>
